<template>
	<div class="module-common-wrapped">
		<div class="module-common-content">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="产品列表" name="first">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-common-header">
								<div class="search-wrapped">
									<el-input v-model="productId" class="w-50 m-2" size="large" placeholder="输入入库编号进行搜索"
										:prefix-icon="Search" @change="searchProducts()" clearable
										@clear="getProductFirstPageList" />
								</div>
								<div class="button-wrapped">
									<el-button type="primary" @click="productInWarehouse">产品入库</el-button>
								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-common-table">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column type="index" width="50"></el-table-column>
									<el-table-column prop="product_id" label="入库编号" width="200" />
									<el-table-column prop="product_name" label="产品名称" width="160" />
									<el-table-column prop="product_category" label="产品类别" width="100" />
									<el-table-column prop="product_unit" label="单位" />
									<el-table-column prop="product_in_warehouse_number" label="库存数量" width="100" />
									<el-table-column prop="product_single_price" label="产品单价" width="150" />
									<el-table-column prop="product_all_price" label="库存总价" width="100" />
									<el-table-column prop="product_status" label="库存状态" width="100">
										<template #default="{ row }">
											<el-tag class="ml-2" type="success"
												v-if="row.product_in_warehouse_number < 100">库存较少</el-tag>
											<el-tag class="ml-2" type="success"
												v-else-if="row.product_in_warehouse_number > 100 && row.product_in_warehouse_number < 300">库存正常</el-tag>
											<el-tag class="ml-2" type="success"
												v-else-if="row.product_in_warehouse_number > 300">库存过剩</el-tag>
										</template>
									</el-table-column>
									<el-table-column prop="product_create_person" label="入库负责人" width="100" />
									<el-table-column prop="product_create_time" label="入库时间" width="200">
										<template #default="{ row }">
											<div>{{ row.product_create_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_update_time" label="最后修改时间" width="200">
										<template #default="{ row }">
											<div>{{ row.product_update_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="in_memo" label="入库备注" width="200" />
									<el-table-column label="操作" width="300" fixed="right">
										<template #default="{ row }">
											<div>
												<el-button type="primary" @click="applyOut(row)"
													:disabled='row.product_out_status == "申请出库" || row.product_in_warehouse_number == 0'>申请出库</el-button>
												<el-button type="success" @click="editProduct(row)"
													:disabled='row.product_out_status == "申请出库"'>修改</el-button>
												<el-popconfirm :disabled='row.product_out_status == "申请出库"'
													:title="`确定删除${row.product_name}`" width="220px"
													@confirm="deleteProducts(row)">
													<template #reference>
														<el-button type="danger">删除</el-button>
													</template>
												</el-popconfirm>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.productCurrentPage"
								:pager-count="7" :total="paginationData.productTotal"
								:page-count="paginationData.productPageCount" @current-change="ProductCurrentChange"
								layout="prev, pager, next" />
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="审核列表" name="second">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-common-header">
								<div class="search-wrapped">
									<el-input v-model="productOutId" class="w-50 m-2" size="large" clearable
										placeholder="输入入库编号进行搜索" :prefix-icon="Search" @change="searchApplyProduct()"
										@clear="getApplyProductFirstPageList" />
								</div>
								<div class="button-wrapped">
								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-common-table">
								<el-table :data="applyTableData" border style="width: 100%">
									<el-table-column type="index" width="50"></el-table-column>
									<el-table-column prop="product_out_id" label="申请出库编号" width="200" />
									<el-table-column prop="product_name" label="产品名称" width="200" />
									<el-table-column prop="product_out_number" label="申请出库数量" width="180" />
									<el-table-column prop="product_out_price" label="申请出库总价" width="180" />
									<el-table-column prop="product_out_apply_person" label="申请人" width="100" />
									<el-table-column prop="product_apply_time" label="申请出库时间" width="180">
										<template #default="{ row }">
											<div>{{ row.product_apply_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_out_audit_person" label="审核人" width="150" />
									<el-table-column prop="product_audit_time" label="审核时间" width="180">
										<template #default="{ row }">
											<div>{{ row.product_audit_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_out_status" label="审核状态" width="100" />
									<el-table-column prop="apply_memo" label="申请出库备注" width="200" />
									<el-table-column prop="audit_memo" label="审核备注" width="200" />
									<el-table-column label="操作" width="300" fixed="right">
										<template #default="{ row }">
											<div>
												<el-popconfirm title="确认撤回申请" @confirm="withdrawProduct(row.id)">
													<template #reference>
														<el-button>撤回申请</el-button>
													</template>
												</el-popconfirm>
												<el-popconfirm title="确定申请出库?" :disabled='row.product_out_status == "申请出库"' @confirm="againApply(row)">
													<template #reference>
														<el-button>再次申请</el-button>
													</template>
												</el-popconfirm>
												<el-button type="danger" @click="auditProduct(row)">审核</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.applyProductCurrentPage"
								:pager-count="7" :total="paginationData.applyProductTotal"
								:page-count="paginationData.applyProductCount"
								@current-change="applyProductCurrentChange" layout="prev, pager, next" />
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
	<!-- 产品入库 -->
	<productinwarehouse ref="productinwarehouseRef" @success="getData"></productinwarehouse>
	<!-- 申请出库 -->
	<apply ref="applyRef" @success="getData"></apply>
	<!-- 审核操作影响产品列表、审核列表 -->
	<audit ref="auditRef" @success="allGetData"></audit>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getProductList, deleteProduct, applyProductList, searchProductForId, searchProductForApplyId, withdrawApplyProduct,applyOutProduct } from '@/api/product/index'
import type {applyOutProductForm} from '@/api/product/type'
import productinwarehouse from '../components/product_in_warehouse.vue'
import apply from '../components/apply.vue'
import audit from '../components/audit.vue'
import { ElMessage } from "element-plus"
//---------------产品列表
const activeName = ref('first')
const handleClick = () => { }
//搜索输入框
const productId = ref('')
const searchProducts = async () => {
	const res: any = await searchProductForId(productId.value)
	if (res.status == 0) {
		tableData.value = res.data
	}
}
const getProductFirstPageList = async () => {
	let res = await getProductList()
	if (res.status == 0) {
		tableData.value = res.data
	}
}
onMounted(() => {
	getData()
	applyProductLists()
})
//两个请求
const allGetData = () => {
	getData()
	applyProductLists()
}
//产品入库
const productinwarehouseRef = ref()
const productInWarehouse = () => {
	productinwarehouseRef.value.open()
}
const tableData = ref([])
const getData = async () => {
	const res = await getProductList()
	if (res.status == 0) {
		tableData.value = res.data
	}
}
//-------操作
const applyRef = ref()
// 申请出库
const applyOut = (row: any) => {
	applyRef.value.open(row)
}
//修改
const editProduct = (row: any) => {
	productinwarehouseRef.value.open(row)
}
//删除
const deleteProducts = async (row: any) => {
	const res = await deleteProduct(row.id)
	if (res.status == 0) {
		ElMessage({
			type: 'success',
			message: '删除成功'
		})
		getData()
	} else {
		ElMessage({
			type: 'error',
			message: '删除失败'
		})
	}
}
//分页
const paginationData = reactive({
	productCurrentPage: '',
	productTotal: '',
	productPageCount: '',
	applyProductCurrentPage: '',
	applyProductTotal: '',
	applyProductCount: '',
})

//
const ProductCurrentChange = () => {

}

//------------------------审核列表---

const productOutId = ref('')
const searchApplyProduct = async () => {
	const res = await searchProductForApplyId(productOutId.value)
	if (res.status == 0) {
		applyTableData.value = res.data
	}
}
const getApplyProductFirstPageList = () => {
	applyProductLists()
}
const applyTableData = ref([])
const applyProductLists = async () => {
	const res = await applyProductList()
	if (res.status == 0) {
		applyTableData.value = res.data
	}
}
//撤回申请
const withdrawProduct = async (id: number) => {
	const res = await withdrawApplyProduct(id)
	if (res.status == 0) {
		allGetData()
	}
}
//再次申请
const againApply = async(row: any) => {
	let data:applyOutProductForm =  {
		id: row.id,
		product_name:row.product_name,
		product_out_id: row.product_out_id,
    	product_in_warehouse_number:row.product_in_warehouse_number,
		product_single_price:row.product_single_price,
		product_out_number: row.product_out_number,
		product_out_apply_person: row.product_out_apply_person,
		apply_memo: row.apply_memo
	} 
	const res = await applyOutProduct(data)
	if(res.status == 0){
		allGetData()
	}
}
// 审核
const auditRef = ref()
const auditProduct = (row: any) => {
	auditRef.value.open(row)
}
const applyProductCurrentChange = () => { }
</script>

<style scoped>
@import url('@/assets//css/common.scss');
</style>
